<template>
    <div id="pinecharts">
    </div>
</template>


<script setup>
import { inject, onMounted, ref, watch } from 'vue'
const echarts = inject('echarts')

let option = {
    title: {
        text: '章节任务学习进度',
        left: 'center',
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        show: true,
        left: '30',
        top: '40',
        orient: 'vertical',
        height: 300,
        textStyle: { lineHeight: 16 }
    },
    series: [
        {
            name: '章节任务学习进度',
            top: '15%',
            left: '22%',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: true,
                // : true,
                position: 'outside' // 设置标签在外 即显示引导线
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 20,
                    fontWeight: 'bold'
                },
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            labelLine: {
                show: true,
                length: 20,  // 第一段引导线长度
                length2: 30, // 第二段引导线长度
            },
            data: [
                // { value: 110, name: '待完成' },
                // { value: 190, name: '已完成' },
            ]
        }
    ]
};

// 定义传入props值
const props = defineProps({
    piedata: {
        default: () => [{ value: 110, name: '待完成' }, { value: 190, name: '已完成' },],
        type: Array,
        required: true
    }
})

onMounted(() => {
    var chartDom = document.querySelector('#pinecharts');
    var myChart = echarts.init(chartDom);
    option && myChart.setOption(option);

    watch(() => props.piedata, (newval, oldval) => {
        option.series[0].data = newval
        option && myChart.setOption(option);
    },
        {
            immediate: true
        }
    )
    // initCharts()
})

function initCharts() {
    var chartDom = document.querySelector('#pinecharts');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '章节任务学习进度',
            left: 'center',
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '15%',
            left: 'center'
        },
        series: [
            {
                name: '章节任务学习进度',
                top: '15%',
                left: 'center',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 110, name: '待完成' },
                    { value: 190, name: '已完成' },
                ]
            }
        ]
    };

    option && myChart.setOption(option);

}
</script>

<style scoped>
#pinecharts {
    box-sizing: border-box;
    width: 500px;
    height: 290px;
    border: 1px solid #ccc;
    padding: 10px 20px 20px;
    /* padding-left: 20px; */
}
</style>